<style>
	.CodeMirror { 
		text-align: left !important;
		font-size: 15px;
		line-height: 150%;
		resize: both !important;
	}
</style>
<link rel="stylesheet" href="/luci-static/resources/openclash/lib/codemirror.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/theme/material.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/theme/idea.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/fold/foldgutter.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/lint/lint.css">
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/display/fullscreen.css">
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/dialog/dialog.css">
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/search/matchesonscrollbar.css">
<script src="/luci-static/resources/openclash/lib/codemirror.js"></script>
<script src="/luci-static/resources/openclash/mode/yaml/yaml.js"></script>
<script src="/luci-static/resources/openclash/mode/lua/lua.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/foldcode.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/foldgutter.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/indent-fold.js"></script>
<script src="/luci-static/resources/openclash/addon/edit/matchbrackets.js"></script>
<script src="/luci-static/resources/openclash/addon/selection/active-line.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/lint.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/yaml-lint.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/js-yaml.min.js"></script>
<script src="/luci-static/resources/openclash/addon/display/fullscreen.js"></script>
<script src="/luci-static/resources/openclash/addon/display/autorefresh.js"></script>
<script src="/luci-static/resources/openclash/addon/dialog/dialog.js"></script>
<script src="/luci-static/resources/openclash/addon/search/searchcursor.js"></script>
<script src="/luci-static/resources/openclash/addon/search/search.js"></script>
<script src="/luci-static/resources/openclash/addon/scroll/annotatescrollbar.js"></script>
<script src="/luci-static/resources/openclash/addon/search/matchesonscrollbar.js"></script>
<script src="/luci-static/resources/openclash/addon/search/jump-to-line.js"></script>

<script type="text/javascript">//<![CDATA[
function editor(id, readOnly, wid, height)
{
	var editor = CodeMirror.fromTextArea(id, {
	mode: "text/yaml",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "material",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	lint: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        },
        "Tab": function(cm) {
				   if (cm.somethingSelected()) {
              cm.indentSelection('add')
           } else {
              var spaces = Array(cm.getOption("indentUnit") + 1).join(" ")
              cm.replaceSelection(spaces)
           }
        }
      }
	});
	
	if (readOnly == "true") {
		editor.setOption("readOnly","true");
	}
	
	if (wid && height) {
		editor.setSize(wid, height);
	}
}

function other_editor(id, readOnly)
{
	var editor = CodeMirror.fromTextArea(id, {
	mode: "lua",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "material",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        },
        "Tab": function(cm) {
           if (cm.somethingSelected()) {
              cm.indentSelection('add')
           } else {
              var spaces = Array(cm.getOption("indentUnit") + 1).join(" ")
              cm.replaceSelection(spaces)
           }
        }
      }
	});
}

var myEditor_use = document.getElementById("cbid.table.1.user");
var myEditor_def = document.getElementById("cbid.table.1.default");

if (myEditor_use && myEditor_def) {
	var myEditor_use_wid = document.getElementById("cbi-table-1-user").offsetWidth;
	var myEditor_def_wid = document.getElementById("cbi-table-1-default").offsetWidth;

	editor(myEditor_use, 'false', myEditor_use_wid, '700px');
	editor(myEditor_def, 'true', myEditor_def_wid, '700px');
}

var myEditor_hosts = document.getElementById("cbid.openclash.config.custom_hosts");
var myEditor_fall_fil = document.getElementById("cbid.openclash.config.custom_fallback_fil");
var myEditor_name_pol = document.getElementById("cbid.openclash.config.custom_domain_dns_core");
var myEditor_name_cus_r1 = document.getElementById("cbid.openclash.config.custom_rules_2");
var myEditor_name_cus_r2 = document.getElementById("cbid.openclash.config.custom_rules");
var myEditor_fake_filter = document.getElementById("cbid.openclash.config.custom_fake_filter");
var myEditor_custom_domain_dns = document.getElementById("cbid.openclash.config.custom_domain_dns");

if (myEditor_hosts) {
	editor(myEditor_hosts, 'false');
}

if (myEditor_fall_fil) {
	editor(myEditor_fall_fil, 'false');
	editor(myEditor_name_pol, 'false');
	editor(myEditor_name_cus_r1, 'false');
	editor(myEditor_name_cus_r2, 'false');
}

if (myEditor_fake_filter) {
	other_editor(myEditor_fake_filter, 'false');
}
if (myEditor_custom_domain_dns) {
	other_editor(myEditor_custom_domain_dns, 'false');
}

var core_log = document.getElementById("core_log");
var oc_log = document.getElementById("cbid.openclash.config.clog");
if (core_log && oc_log) {
	var core_editor = CodeMirror.fromTextArea(core_log, {
	mode: "lua",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "idea",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      }
	});
	
	var oc_editor = CodeMirror.fromTextArea(oc_log, {
	mode: "lua",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "idea",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      }
	});
	core_editor.setSize("auto", "540px");
	core_editor.setOption("readOnly","true");
	oc_editor.setSize("auto", "540px");
	oc_editor.setOption("readOnly","true");
}

var proxy_mg = document.getElementById('cbi-table-1-proxy_mg');
var rule_mg = document.getElementById('cbi-table-1-rule_mg');
var game_mg = document.getElementById('cbi-table-1-game_mg');
var Commit = document.getElementById('cbi-table-1-Commit');
var Apply = document.getElementById('cbi-table-1-Apply');
if (proxy_mg) {
	proxy_mg.style.textAlign="center";
	rule_mg.style.textAlign="center";
	game_mg.style.textAlign="center";
	Commit.style.textAlign="center";
  Apply.style.textAlign="center";
}
//]]>
</script> 